<template>
  <div>
    <p>{{ sum }}</p>
    <p>{{ sum2 }}</p>
    <button @click="changsum">修改sum</button>
    <button @click="changsum2">修改sum2</button>
    <br />
    <p>汽车品牌:{{ car.brand }}</p>
    <p>汽车颜色:{{ car.option.color }}</p>
    <button @click="changeBrand">修改汽车品牌</button>
    <button @click="changeColor">修改汽车颜色</button>

    <p>汽车品牌2:{{ car2.brand }}</p>
    <p>汽车颜色2:{{ car2.option.color }}</p>
    <button @click="changeBrand2">修改汽车品牌2</button>
    <button @click="changeColor2">修改汽车颜色2</button>
  </div>
</template>

<script setup lang="ts" name="">
import { reactive, readonly, ref, shallowReadonly } from "vue";
let sum = ref(0);
//readonly限制所层都只读
//shallowReadonly 浅层只读,只限制第一层只读，第二次及深层及层都可读
//作用：保护数据
let sum2 = readonly(sum); //readonly 函数，返回一个只读的ref对象  只读   sum2.value = 1;  会报错

let car = reactive({ brand: "Audi", option: { color: "白色", engine: "v8" } });
let car2 = shallowReadonly(car); //shallowReadonly 浅层只读,只限制第一层只读，第二次及深层及层都可读
function changsum() {
  sum.value++;
}
function changsum2() {
  sum2.value++; //sum2是不能修改的，会报错
}
function changeBrand() {
  car.brand = "xiaomi";
}
function changeColor() {
  car.option.color = "蓝色";
}
function changeBrand2() {
  car2.brand = "xiaomi"; //band是不能修改的，会报错
}
function changeColor2() {
  car2.option.color = "蓝色"; //color是可以修改的
}
</script>

<style scoped></style>
